<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pm="http://primefaces.org/mobile"
        xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">

    <f:view renderKitId="PRIMEFACES_MOBILE" />

    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/mobile/theme/mintchoc.css" />
        <link type="text/css" rel="stylesheet" href="#{request.contextPath}/javax.faces.resource/mobile/jquery-mobile-icons.css.jsf?ln=primefaces" />
        <link type="text/css" rel="stylesheet" href="#{request.contextPath}/javax.faces.resource/mobile/jquery-mobile-structure.css.jsf?ln=primefaces" />
        <link type="text/css" rel="stylesheet" href="#{request.contextPath}/javax.faces.resource/mobile/primefaces-mobile.css.jsf?ln=primefaces" />
        <script type="text/javascript" src="#{request.contextPath}/javax.faces.resource/jquery/jquery.js.jsf?ln=primefaces"></script>
        <script type="text/javascript">
            $(document).on('mobileinit', function() {
                $.mobile.ajaxEnabled = false;
                $.mobile.pushStateEnabled = false;
                $.mobile.page.prototype.options.domCache = true;
            });
        </script>
        <script type="text/javascript" src="#{request.contextPath}/javax.faces.resource/mobile/jquery-mobile.js.jsf?ln=primefaces"></script>
        <script type="text/javascript" src="#{request.contextPath}/javax.faces.resource/primefaces-mobile.js.jsf?ln=primefaces"></script>
    </head>
    
    <h:body>

        <pm:page>
            <pm:header title="Theming"></pm:header>

            <pm:content>
                <p>PrimeFaces Mobile theming is built on top of jQuery Mobile CSS Framework and the theme used on this page is created by the online  
                    <a href="http://themeroller.jquerymobile.com">Mobile ThemeRoller</a> application. A custom theme is a jar file with a specific
                    folder structure and configured for the mobile pages using <i>primefaces.mobile.THEME</i> context parameter.</p>

                <pm:field>
                    <p:outputLabel for="basic" value="Basic:" />
                    <p:inputText id="basic" />
                </pm:field>
                
                <pm:field>
                    <p:outputLabel for="selectOneRadio" value="SelectOneRadio" />
                    <p:selectOneRadio id="selectOneRadio">
                        <f:selectItem itemLabel="Option 1" itemValue="1" />
                        <f:selectItem itemLabel="Option 2" itemValue="2" />
                        <f:selectItem itemLabel="Option 3" itemValue="3" />
                    </p:selectOneRadio>
                </pm:field>
                
                <p:commandButton value="Button" type="button" icon="ui-icon-gear"/>
                
                <p:tabView>
                    <p:tab title="Tab I">
                        Lorem
                    </p:tab>
                    <p:tab title="Tab II">
                        Ipsum
                    </p:tab>
                    <p:tab title="Tab III">
                        Dolor
                    </p:tab>
                </p:tabView>
                
                <h2>Advanced</h2>
                <p>Images, Links, Inset layout, formatting, header and footer.</p>
                <p:dataList value="#{ringBean.players}" var="player" pt:data-inset="true">
                    <f:facet name="header">
                        List of Players
                    </f:facet>
                    <h:outputLink value="#">
                        <p:graphicImage value="/images/barca/#{player.photo}" />
                        <h2>#{player.name}</h2>
                        <p>#{player.position}</p>
                        <p class="ui-li-aside"><strong>#{player.number}</strong></p>
                    </h:outputLink>
                    <f:facet name="footer">
                        F.C. Barcelona
                    </f:facet>
                </p:dataList>
                
                
            </pm:content>
        </pm:page>

    </h:body>

</html>